<template>
  <div class="home" :class="{ 'timer-rotate': model == 'TIME' }">
    <timer :model="model" :weather="weather" :config="config" @click.native="changeRotate" class="timer-wrap" />
    <search-input v-show="model != 'TIME'" />
    <book-mark v-show="model != 'TIME'" @reinit="init" @setting="drawer = true" />
    <el-drawer :visible.sync="drawer" size="65%" :modal="false" :with-header="false" @close="closeDrawer">
      <div class="setting-wrap">
        <div class="row" @click="config.isShowSecond = !config.isShowSecond">
          <div class="label">显示秒</div>
          <i class="icon-size" :class="config.isShowSecond ? 'el-icon-open' : 'el-icon-turn-off'"></i>
        </div>
        <!-- <div class="row" @click="config.isShowWeather = !config.isShowWeather">
          <div class="label">显示天气</div>
          <i class="icon-size" :class="config.isShowWeather ? 'el-icon-open' : 'el-icon-turn-off'"></i>
        </div> -->
        <div class="row">
          <div class="label">天气城市</div>
          <el-input class='city-input' v-model="city" />
        </div>
          <router-link class="row" to="/stopwatch">
            秒表
          </router-link>
        <div class="row">
          <div class="label" @click="clearCookies">清空Cookie</div>
          <div>{{ cookieLength }}</div>
        </div>
        <div class="row">
          <div class="label">Cookie说明</div>
          <div>
            清空cookie会导致书签丢失，搜索引擎重置。
            请保持cookie在2048以下，Cookie最大4074。
            当cookie过大时，kindle浏览器不定时爆炸。
            可以重启进入当前页面清空当前页面cookie。
            另: 当浏览器爆炸时，说明cookie占满，清空当前页面cookie无效时，说明是别的网页占用cookie过大，请备份资料然后重置kindle
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// @ is an alias to /src
import Timer from '@/components/Timer';
import BookMark from './components/BookMark';
import SearchInput from '@/components/SearchInput';
import { bookmarks, SearchEngines } from '@/bookmark/';

import { Drawer } from 'element-ui';

import { fullScreen, exitFullscreen } from '@/utils';

import { weatherForecast } from '@/api/weatherForecast';

import Cookies from 'js-cookie';
export default {
  name: 'Home',
  components: {
    Timer,
    BookMark,
    SearchInput,
    [Drawer.name]: Drawer
  },
  provide() {
    return {
      config: this.config,
      SearchEngines: this.SearchEngines,
      markList: this.markList
    };
  },
  data() {
    return {
      model: 'ALL',
      config: {
        label: '',
        second: '',
        isShowSecond: true,
        isShowWeather: true
      },
      SearchEngines: SearchEngines,
      markList: [],
      // drawer
      drawer: false,
      // 天气预报
      timer: null,
      city: '',
      weather: {
        // cityid	String	城市ID
        cityid: '101181101',
        // city	String	城市名称
        city: '焦作',
        // update_time	String	更新时间
        update_time: '00:33',
        // wea	String	天气情况
        wea: '晴',
        // wea_img	String	天气对应图标	固定9种类型(您也可以根据wea字段自己处理): xue、lei、shachen、wu、bingbao、yun、yu、yin、qing
        wea_img: 'qing',
        // tem	String	实时温度
        tem: '26',
        // tem_day	String	白天温度(高温)
        tem_day: '35',
        // tem_night	String	白天温度(低温)
        tem_night: '20',
        // win	String	风向
        win: '东风',
        // win_speed	String	风力等级
        win_speed: '2级',
        // win_meter	String	风速
        win_meter: '小于12km/h',
        // air	String	空气质量
        air: '70'
      },
      cookieLength: 0
    };
  },
  created() {
    this.init();
  },
  mounted(){
    this.cookieLength = document.cookie.length
  },
  methods: {
    init() {
      // 搜索引擎
      let SearchIndex = 0;
      try {
        SearchIndex = +Cookies.get('S');
        if (isNaN(SearchIndex)) {
          throw new Error();
        }
      } catch (error) {
        Cookies.set('S', '0', { expires: 365 });
      }
      Object.assign(this.config, SearchEngines[SearchIndex]);
      // 书签保存及其排序
      let markList = null;
      try {
        markList = JSON.parse(Cookies.get('B'));
        if (!markList.length) {
          throw new Error();
        }
      } catch (error) {
        markList = bookmarks;
        Cookies.set('B', JSON.stringify(bookmarks), { expires: 700 });
      }

      let row = markList[markList.length - 1];
      if (!row || row.url) {
        markList.push({
          label: '',
          url: ''
        });
        this.markList.push(...markList);
      }
      // 天气预报 
      // 城市
      let city = null
      try {
        city = JSON.parse( Cookies.get('C') )
        if( !city ){
          throw new Error()
        }
      } catch (error) {
        this.weatherForecast()
      }
      this.city = city
      // 修改成每十分钟更新一次
      this.timer = setInterval(this.weatherForecast, 10 * 60 * 1000);
      this.weatherForecast();

      // 显示秒 保存配置
      // 城市
      let isShowSecond = true
      try {
        isShowSecond = !!JSON.parse( Cookies.get('D') )
      } catch (error) {
      }
      this.config.isShowSecond = isShowSecond;
    },
    weatherForecast() {
      weatherForecast( this.city ).then( weather => {
        Object.assign(this.weather, weather);
        // Cookies.set('weather', JSON.stringify( weather ), { expires: 0.02 })
      });
    },
    closeDrawer() {
      let city = this.city || '' ;
      city = city.trim();
      Cookies.set('C', city, { expires: 700 });
      Cookies.set('D', +this.config.isShowSecond, { expires: 700 });
      this.city = city ;
      this.weatherForecast();
    },
    changeRotate() {
      if (this.model === 'TIME') {
        // '退出全屏'
        // exitFullscreen()
        this.model = 'ALL';
      } else {
        // fullScreen()
        this.model = 'TIME';
    }
      // console.log( 'rotate', this.model );
    },
    clearCookies(){
      document.cookie = ''
    }
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>
<style lang='scss' scoped>
.home /deep/ {
  .el-drawer,
  .el-drawer__wrapper {
    animation: none;
    transition: none;
  }
}
.timer-rotate {
  margin-top: -27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .timer-wrap {
    width: 100vh;
    transform: rotateZ(90deg);
  }
}

.setting-wrap {
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px #000 dashed;
  padding: 15px 20px;
  margin-bottom: 20px;
}

.icon-size{
  font-size: 36px;
}
.label{
  margin-right: 10px;
}
.city-input{
  flex:1;
}
</style>
